<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/myCss.css">
    <link rel="stylesheet" href="./css/bootstrap.css">

    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <!-- 古诗词js -->
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
    <style>
        h1,h3{
            font-family: myfont;
        }
        h2 {
            font-family:cursive;
            color: rgb(24, 240, 9);
            text-shadow: 1px 1px;
            /* font-weight: bold; */
        }
        h2>#poem_info{
            margin-left: 100px;
            font-size: 23px;

            color: rgb(0, 200, 255);
        }
        @font-face
{
    font-family: myfont;
    src: url(./fonts/font.ttf);
}
    </style>
</head>

<body>
    <div class="jumbotron" style="height: 100%;">
        <div class="container" id="a">
            <h1>欢迎使用本系统!</h1>
            <br>
            <h3 style="color: green;">祝君每天拥有好心情</h3>
                <br>
               <h2><div id="poem_sentence">...</div></h2>
                <h2><div id="poem_info">...</div></h2>
            </h3>
            <script>
                $(function () {
                    setInterval(function () {
                        jinrishici.load(function (result) {
                            var sentence = document.querySelector("#poem_sentence")
                            var info = document.querySelector("#poem_info")
                            sentence.innerHTML = result.data.content
                            info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
                        });
                    }, 10000);
                })

            </script>
        </div>
    </div>
</body>

</html>